import React,{useCallback,useState} from 'react';
import './index1.css';
import {useDrag} from 'react-dnd';
import ItemTypes from './ItemTypes';
import {Dao} from './dao';
import update from 'immutability-helper';
import {useSelector,useDispatch} from 'react-redux';
import {updateDaoOrder1} from '../../../redux/actions';

import SplitPane from 'react-split-pane';
import Split from 'react-split';

export const DaoContainer = (props) => {   
  
  const defaultDaosList = props.daosList;   // 传入 道和选中曲线 的参数
  const isFixed = props.isFixed
  //console.log("defaultDaosList",defaultDaosList,isFixed);
  const depthDataa = useSelector(state => state.depthDataa1);
  const curvesCount = useSelector(state => state.curvesCount);

  
  const chartZoom = useSelector(state => state.gridConfig.chartZoom)
  
  const dispatch = useDispatch();

  const [, drag] = useDrag({   // 拖拽对象
    item: {
      type: ItemTypes.DAO_CONTAINER,
    },
  });
  
  const [daos, setDaos] = useState(defaultDaosList);   // daos初始化， 保存最终的daos为daosList的值  

  const moveDao = useCallback(   // 当daos改变时调用，交换位置    
    (dragIndex, hoverIndex) => {   // 移动道时，dragIndex：移动前的位置, hoverIndex：移动后落下的位置 
      const dragDao = daos[dragIndex]
      setDaos(    // 两个道 交换位置
        update(daos, {
          $splice: [
            [dragIndex, 1],
            [hoverIndex, 0, dragDao],   
          ],
        }),
      )
    },
    [daos],
    dispatch(updateDaoOrder1(daos))   // 更新reducer的道顺序
  );

  const renderDao = (dao, index, depthDaoCount) => {   // 渲染dao,将属性传给<Dao />
    return (
      <Dao
        key={dao.id}
        index={index}
        id={dao.id}
        title={dao.title}
        curves={dao.curves}
        moveDao={moveDao}  
        isFixed={props.isFixed} 
        scrollLeft={props.scrollLeft}   // 水平滚动距离
        depthDaoCount={depthDaoCount}   // 前面有多少个深度道
      />
    )
  }  
  
  
  const bigLineCount = parseInt((depthDataa[depthDataa.length-1] - depthDataa[0]) / 5)+1;   // 道中 大格 的个数
  // const smallLineCount = (depthDataa[depthDataa.length-1] - depthDataa[0]) % 5;   // 道中 小格的个数
  const daoHeaderHeight = curvesCount*34;   // 道头高度； 
  return (
    <div 
      ref={drag} 
      className="dao-wrapper1" 
      style={isFixed ? {height: (bigLineCount) *2 * chartZoom }   // 道头固定，脱离文档流，那么就不需要+道头高度
      : {height: (bigLineCount *2 * chartZoom ) + daoHeaderHeight + 40}}   // 如果道头不固定，占位高度，要+道头高度
    >     
      {/* <SplitPane  split="vertical" defaultSize={80}>     */}
        {daos.map((dao, i) => {
          var depthDaoCount = 0;
          for(let a = 1; a <= i; a++){
            if(daos[i-a] !== undefined){
              if(daos[i-a].type === "depth-dao1"){   // 如果上一个道为深度道，则改为true
                depthDaoCount++
              }
            }
          }
          return renderDao(dao, i, depthDaoCount)
          })}
      {/* </SplitPane>        */}
    </div>
  )
};  